/*
 * @description 动画
 */

// 1.过渡动画设置
@mixin transition(
  $property: all,
  $duration: 0.35s,
  $timingFunction: ease,
  $delay: 0s
) {
  // TODO 多个属性值拼接
  transition: $property $duration $timingFunction $delay;
}

// 2.帧动画设置
@mixin animation(
  $animationId,
  $duration: 0.5s,
  $timingFunction: ease,
  $delay: 0s,
  $iterationCount: 1,
  $direction: normal,
  $fillMode: forwards,
  $playState: running
) {
  // TODO 多个属性值拼接
  animation: $animationId $duration $timingFunction $delay; // 动画执行曲线(ease 线性 | step(1) 非线性)
  animation-play-state: $playState; // 动画执行状态(running 运行 | paused 暂停)
  animation-iteration-count: $iterationCount; // 动画执行次数(number 次数 | infinite 无限次)
  animation-direction: $direction; // 动画执行顺序(normal 正向 | reverse 反向 | alternate 先正向后反向 | alternate-reverse 先反向后正向)
  animation-fill-mode: $fillMode; // 动画执行结束样式(none 无 | backwards 动画起始帧样式 | forwards 动画结束帧样式)
}
